<template>
    <div class="ViewVideo" v-if="value" ref="ViewVideo">
        <i class="el-icon-error" @click="closePage"></i>
        <div class="video">
            <video src="http://v.itheima.com/xmsz.mp4" controls autoplay></video>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ViewVideo',
    props: {
        value: Boolean
    },
    methods: {
        closePage () {
            this.$refs.ViewVideo.style.opacity = '0'
            setTimeout(() => this.$emit('input', false), 400)
        }
    },
    watch: {
        value (val) {
            if (val) {
                setTimeout(() => this.$refs.ViewVideo.style.opacity = '1', 0)
            }
        }
    }
}
</script>

<style scoped lang="scss">
.ViewVideo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    opacity: 0;
    transition: all 0.4s;

    i {
        position: fixed;
        top: 1vh;
        left: 50vw;
        font-size: 42px;
        color: white;
        cursor: pointer;
        z-index: 19999;
    }

    .video {
        position: fixed;
        top: 6vh;
        width: 100vw;
        height: 88vh;
        display: flex;
        align-items: center;
        justify-content: center;

        video {
            border-radius: 8px;
            max-height: 88vh;
        }
    }
}
</style>
